<template>
	<view>
		<view class="auth" style="margin-top: 80rpx;">
			<uni-icons @click="onBack()" type="left" style="position: absolute;top: 66rpx;left: 20rpx; z-index: 999;"
				size="30"></uni-icons>
			<image src="../../../static/images/default/login_bg.png" mode="aspectFit"
				style="position: absolute;top: -100rpx;width: 105%;left: 0rpx;"></image>
			<view class="wanl-title"
				style="color: black;font-size: 50rpx;font-weight: 500;position: relative;z-index: 999;">欢迎登录账号</view>
			<form @submit="formSubmit">
				<view style="border-bottom: 0.5vw solid #D8D8D8;" class="auth-group radius-bock wlian-grey-light">
					<input placeholder="请输入手机号" type="number" maxlength="11" confirm-type="next" style="color: black;"
						placeholder-class="placeholder" name="mobile" :value="mobile"></input>
				</view>

				<view style="margin-top: 10vw;" class="auth-button flex flex-direction">
					<button
						style=" border-radius: 86.4vw;  background: linear-gradient(90deg, #ff8833 0%, #ff8833 100%);color: white;"
						class="cu-btn bg-orange sl radius-bock"
						form-type="submit">获取验证码</button><!-- disabled="true" -->
				</view>
				<view class="text-center" @tap="name" style="color: #ff8833;" >
					账号密码登录
				</view>
			</form>
		</view>
		<view class="auth-foot">
			<view class="menu text-grey" style="color: gray;" >
				<text @tap="register">注册</text>
				<text @tap="help">帮助</text>
			</view>
		</view>
	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				mobile: '',
				pageroute: ''
			};
		},
		onLoad(options) {
			this.mobile = options.mobile;
			this.pageroute = options.url;
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			formSubmit: function(e) {
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [{
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.$wanlshop.to(
						`validcode?event=mobilelogin&mobile=${e.detail.value.mobile}&url=${this.pageroute}`,
						'slide-in-bottom', 200);
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			},
			phoneKey: function(e) {
				var phoneNum = this.value.trim();
				//如果是删除按键，则什么都不做
				if (e.keyCode === 8) {
					this.value = phoneNum;
					return;
				}
				var len = phoneNum.length;
				if (len === 3 || len === 8) {
					phoneNum += ' ';
					this.value = phoneNum;
				}
			},
			name() {
				this.$wanlshop.to(`name`);
			},
			register() {
				this.$wanlshop.to(`register?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			}
		}
	};
</script>

<style>
	@import url("auth.css");
</style>